// 1. 导入 路径查询参数类型
import { LocationQuery } from "vue-router"

export const useRouteQuery = () => {
  // 2. 处理成 ref 响应式，实现 redirect 重定向路径变化，可以实时更新
  const redirect = ref("")
  // 3. 处理成 ref 响应式，实现 除了 redirect 重定向路径，其他参数变化，可以实时更新
  const otherQuery = ref<LocationQuery>()
  // 4. 获取 路由
  const route = useRoute()
  // 5-2. 拆分 查询参数
  const getOtherQuery = (query: LocationQuery) => {
    return Object.keys(query).reduce((memo, key) => {
      if (key !== "redirect") {
        memo[key] = query[key]
      }
      return memo
    }, {} as LocationQuery)
  }
  // 5. 监听 路由 变化， 拆分 路径 和 查询参数
  watchEffect(() => {
    const query = route.query
    if (query) {
      // 5-1. 拆分 路径
      redirect.value = query.redirect as string
      // 5-2. 拆分 查询参数
      otherQuery.value = getOtherQuery(query)
    }
  })
  // hook 返回值 解析出一个重定向的路径 + 其他的查询参
  return {
    redirect,
    otherQuery
  }
}
